/**
 * Created by DELL on 2017/6/7.
 */

import React  from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    PixelRatio,
    TouchableHighlight,
    TouchableOpacity,
    ListView,

} from 'react-native';

import BaseComponent, {base,AppIndictor} from '../../base/Base' ;


let {
    N028_ORDERS$_GET_ORDERS,//获取订单列表
    J002_PAY$_VERIFICATION_ORDER_PAY,
    J003_PAY$_RESULT_ORDER_PAY,
} = base.requests;

let {
    IDENTIFICATION_WXPAY_DEBUG,//微信支付 测试
    IDENTIFICATION_ALIPAY_DEBUG,//支付宝  测试
} = base.fields;
export default class PayPage extends BaseComponent {
    static navigationOptions = ({navigation}) => ({
        title: '支付方式',//navigation 的默认设置属性 标题
    })
    //eb0262754066451e95eda30cb78b1795
    constructor(props) {
        super(props);
        this.state = {
            isFromOrder: false,
            orderId: this.props.navigation.state.params.orderId,
            orderData: null,
            showIndictor:false,
        }
    }

    componentWillMount() {
        let params = this.props.navigation.state.params;
        if (params && params.isFromOrder) {

            this.setState({
                isFromOrder: true,
            })
        }
    }

    componentDidMount() {
        this._getOrderDetailInfo();
    }

    _setAppIndictor(visible){
        this.setState({
            showIndictor:visible,
        })
    }
    //获取订单信息
    _getOrderDetailInfo() {
        this._setAppIndictor(true);

        base.network.getUipData(N028_ORDERS$_GET_ORDERS, {'id': this.state.orderId}, (success) => {

            if (success && success.length > 0) {
                this.setState({
                    orderData: success[0],
                })
            }

            this._setAppIndictor(false);
        }, (error) => {
            this._setAppIndictor(false);
        })
    }
    //根据type 响应支付事件
    _gotoPay(type){
        switch (type){
            case 0:
                //支付宝
                this._payAlipay()
                break
            case 1:
                //微信

                this._payWX()
                break
            default:
                break
        }
    }


    _payWX(){
        let orderDate = this.state.orderData;
        if (!orderDate) {
            return ;
        }
        let params={};
        params.identification=IDENTIFICATION_WXPAY_DEBUG;
        params.total_fee=orderDate.totalAmount;
        params.bill_no=orderDate.paySign;
        params.title=orderDate.serviceCategory.name;
        params.quantity=orderDate.goodsCount;
        base.payTool.startPay(params)
            .then((succ)=>{
                alert('_payWX succ:'+JSON.stringify(succ))
            })
            .catch((error)=>{
                alert('_payWX error:'+JSON.stringify(error))
            });
    }
    _payAlipay(){
        let orderDate = this.state.orderData;
        if (!orderDate) {
            return ;
        }
        let params={};
        params.identification=IDENTIFICATION_ALIPAY_DEBUG;
        params.total_fee=orderDate.totalAmount;
        params.bill_no=orderDate.paySign;
        params.title=orderDate.serviceCategory.name;
        params.quantity=orderDate.goodsCount;
        base.payTool.startPay(params)
            .then((succ)=>{
                alert('_payAlipay succ:'+JSON.stringify(succ))
            })
            .catch((error)=>{
                alert('_payAlipay error:'+JSON.stringify(error))
            });

    }

    render() {
        return (

            <View>
                <AppIndictor
                    modalVisible={this.state.showIndictor}
                    text="验证支付数据..."
                />
                {this._setOrderMoney()}
                {this._setPayWaySelect()}

            </View>
        );


    };

    //---------------view 视图-----------------------

    _setOrderMoney() {
        let orderDate = this.state.orderData;
        if (!orderDate) {
            return <View/>
        }
        return (
            <View style={{flexDirection: 'row', padding: 15, backgroundColor: '#fff', marginTop: 1}}>
                <Text>订单金额</Text>
                <View style={{
                    flexDirection: 'row',
                    backgroundColor: '#fff',
                    flex: 1,
                    justifyContent: 'flex-end',
                    alignItems: 'center'
                }}>
                    <Text style={{color: '#ff5138'}}>
                        {orderDate.totalAmount} 元
                    </Text>
                </View>
            </View>
        )
    }

    _setPayWaySelect() {
        return (
            <View style={{backgroundColor: '#fff', padding: 15, marginTop: 10}}>
                <Text>选择支付方式</Text>
                <View style={{backgroundColor: '#d5d5d5', height: 1, marginTop: 8}}/>
                <PayWayItem
                    ImageSource={require('../../imgs/pay/zhifubao.png')}
                    TextDesc='支付宝支付'
                    onPress={()=>{this._gotoPay(0)}}
                    ImageIconSource={require('../../imgs/pay/indictor_right.png')}
                />
                <View style={{backgroundColor: '#d5d5d5', height: 1, marginTop: 8}}/>
                <PayWayItem
                    ImageSource={require('../../imgs/pay/weixin.png')}
                    onPress={()=>{this._gotoPay(1)}}
                    TextDesc='微信支付'
                    ImageIconSource={require('../../imgs/pay/indictor_right.png')}
                />
            </View>
        )
    }



}
//--------------自定义组件---------------------------

class PayWayItem extends BaseComponent {
    render() {
        return(
        <TouchableHighlight
            underlayColor='#00000000'
            onPress={this.props.onPress}>
            <View style={{flexDirection:'row',alignItems:'center',paddingTop:8,paddingBottom:8}}>
                <Image style={{width:40,height:35,}} source={this.props.ImageSource}/>
                <Text  style={{  marginLeft:15,}}>{this.props.TextDesc}</Text>
                <View style={{
                    flexDirection: 'row',
                    flex: 1,
                    justifyContent: 'flex-end',
                    alignItems: 'center',

                }}>
                    <Image style={{width:8,height:14,marginRight:10}} source={this.props.ImageIconSource}/>

                </View>
            </View>
        </TouchableHighlight>

        )
    }
}


